<template>
  <van-nav-bar title="快速咨询" left-arrow @click-left="onClickLeft" />
  <div class="quick">
    <!-- 标题头 -->
    <p class="title">
      <!-- 病情描述 -->
      <span>1.病情描述</span><span>2.健康信息</span><span>3.医生接诊</span
      ><span
        ><i><span></span></i>医生解答</span
      >
    </p>
    <!-- 咨询 -->
    <div class="second">
      <h4>您要为谁咨询</h4>
      <div @click="handleclick">不想重复填写？导入历史病情</div>
      <span
        ><img src="https://z3.ax1x.com/2021/07/17/WltYCt.png" alt=""
      /></span>
    </div>
    <div class="third" @click="handleclick1"><span>+</span>添加</div>
    <!-- 去过医院 -->
    <div class="forth">
      <h4>去过医院吗</h4>
      <span
        v-for="(item, index) in list"
        :key="index"
        @click="handleclick4(index)"
        :class="{ blueactive: activenum === index }"
        >{{ item }}</span
      >
    </div>
    <!-- 描述详情 -->
    <div class="five">
      <h4>哪里不舒服呢</h4>
      <span>?</span>
    </div>
    <textarea
      cols="30"
      rows="10"
      placeholder="请详细描述您的情况"
      v-model="value"
    ></textarea>
    <!-- 导入医院报告 -->
    <div class="photo">
      <div class="photofirst" @click="handleclick3">
        <img src="https://z3.ax1x.com/2021/07/17/WlNdRx.png" />导入医院报告
      </div>
      <div @click="handleclick2">
        <img src="https://z3.ax1x.com/2021/07/17/WlNMR0.png" />上传照片/视频
      </div>
      <van-action-sheet
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
      />
    </div>
    <!-- 确认并且下一步 -->
    <p class="report"><input type="radio" />希望医生开具药品或提供用药建议</p>
    <van-button type="primary" round="true" @click="handleclick5"
      >下一步</van-button
    >
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const value = ref("");
    let activenum = ref(0);
    const show = ref(false);
    const actions = [
      { name: "拍照" },
      { name: "录像" },
      { name: "从相册里选取" },
    ];
    const list = ref(["没去过", "去过"]);
    const onSelect = (item) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      show.value = false;
      Toast(item.name);
    };
    const onClickLeft = () => {
      router.push("/home");
    };
    const handleclick = () => {
      Toast("暂无历史咨询记录");
    };
    const handleclick1 = () => {
      Toast("跳转记录页面");
    };
    const handleclick2 = () => {
      show.value = true;
    };
    const handleclick3 = () => {
      Toast("请选择就诊人");
    };
    const handleclick4 = (index) => {
      activenum.value = index;
    };
    const handleclick5 = () => {
      Toast("跳转到健康信息");
    };
    return {
      value,
      handleclick,
      handleclick1,
      handleclick2,
      show,
      actions,
      onSelect,
      handleclick3,
      list,
      activenum,
      handleclick4,
      handleclick5,
      onClickLeft,
    };
  },
};
</script>

<style lang="less">
//标题头
.van-nav-bar__content {
  height: 55px;
  border-bottom: 1px solid #ccc;
  .van-nav-bar__title {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 27px;
  }
  .van-nav-bar__arrow {
    color: #333333;
    font-size: 20px;
  }
}
.quick {
  background: #fff;
  font-size: 13px;
  padding: 0 15px;
  h4 {
    font-size: 17px;
    color: #333333;
  }
  // 提示步骤
  .title {
    padding-top: 25px;
    font-size: 12px;
    display: flex;
    padding-bottom: 40px;
    span {
      flex: 1;
      display: flex;
      justify-content: center;
      i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        font-style: none;
        border: 1.5px solid #666666;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        margin-right: 5px;
        span {
          display: inline-block;
          height: 4px;
          width: 5px;
          border-top: 1.5px solid #666;
          border-right: 1.5px solid #666;
          transform: rotate(135deg);
        }
      }
    }
  }
  // 为谁咨询
  .second {
    display: flex;
    justify-content: center;
    align-items: center;
    h4 {
      width: 106px;
      height: 17px;
    }
    div {
      width: 175px;
      height: 13px;
      flex: 1;
      text-align: right;
    }
    span {
      height: 22px;
      width: 22px;
      margin-left: 1.5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  // 添加
  .third {
    height: 50px;
    width: 94px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 18px 0 44px 0;
    font-size: 14px;
    color: #383838;
    span {
      font-size: 25px;
      font-weight: 400;
      margin-bottom: 3px;
    }
  }
  // 去过医院吗
  .forth {
    display: flex;
    justify-content: center;
    align-items: center;
    h4 {
      flex: 1;
    }
    span {
      width: 77px;
      height: 33px;
      border-radius: 16px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 4px;
    }
    .blueactive {
      background: #eff6fe;
      color: #1398f2;
      border: 1px solid #a1c1b1;
    }
  }
  // 哪里不舒服
  .five {
    margin-top: 38px;
    display: flex;
    span {
      margin-left: 11.5px;
      display: inline-block;
      border: 1px solid #ccc;
      color: #ccc;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  textarea {
    border: none;
    margin-top: 22px;
    height: 154px;
    width: 100%;
  }
  // 导入医院报告
  .photo {
    display: flex;
    align-items: center;
    line-height: 22px;
    color: #333333;
    div {
      img {
        width: 22px;
        height: 22px;
        vertical-align: top;
      }
    }
  }
  .photofirst {
    margin-right: 55px;
  }
  // 确认并且下一步
  .report {
    padding: 32px 0 55px;
    color: #999;
    input {
      margin-right: 9px;
    }
  }
  .van-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
